<!-- 歌曲详情 -->
<template>
	<view class="song">
		<!-- 顶部歌手信息和图片 -->
		<view class="song-top">
			<text>{{SongInfo.name}}</text>
			<view class="author">
				<text>{{SongInfo.ar[0].name}}</text>
				<text>关注</text>
			</view>
			<view class="song-box">
				<view></view>
				<image :class="[isplay ? 'true_move':'false_move']" src="../../static/song/needle.png"></image>
			</view>
		</view>

		<!-- 中间旋转图片 -->
		<view class="song-content">
			<image class="rotateimg" :style="{'animation-play-state':isrotate}" :src="SongInfo.al.picUrl"></image>
			<image src="../../static/song/disc.png"></image>
		</view>

		<!-- 底部图标 -->
		<view class="song-bottom">
			<view>
				<image src="../../static/song/喜欢.png"></image>
				<image src="../../static/song/评论 (1).png"></image>
			</view>

			<!-- 进度条 -->
			<view>
				<text>{{currentTime}}</text>
				<view class="undone">
					<view class="activation" :style="{ width: activation_width+'rpx' }">
						<view class="activation-box"></view>
					</view>
				</view>
				<text>{{end_time}}</text>
			</view>
			<view>
				<image src="../../static/song/24gl-repeat2.png"></image>
				<image @click="previous" src="../../static/song/24gl-previous.png"></image>
				<image @click="play" v-show="!isplay" src="../../static/song/播放 (1).png"></image>
				<image @click="play" v-show="isplay" src="../../static/song/暂停.png"></image>
				<image @click="next" src="../../static/song/24gl-next.png"></image>
				<image src="../../static/song/24gl-playlistMusic5.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment' // 时间插件
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				isplay: false, // 当前是否播放状态
				isrotate: 'paused', // 中间图片旋转动画是否播放
				index: 0, // 当前播放音乐的索引位置
				song_id: -1, // 当前播放音乐的id

				currentTime: '00:00', //音乐当前播放时间
				end_time: '00:00', // 音乐结束时间
				activation_width: 0, // 进度条播放宽度
			}
		},
		methods: {
			...mapActions('song', ['GetMusicUrl', 'GetSongInfo']),

			// 点击播放按钮回调
			play() {
				this.isplay = !this.isplay
				if (this.isplay) {
					setTimeout(() => {
						this.bgAudioManager.play()
					}, 1000)

				} else {
					this.bgAudioManager.pause()
				}
			},

			// 下一首按钮
			next() {
				let index = this.index * 1
				index += 1
				if (index >= this.SongList.length) {
					index = 0
				}
				uni.redirectTo({
					url: `/pages/song/song?index=${index}`
				})
			},

			// 上一首播放
			previous() {
				let index = this.index * 1
				index -= 1
				if (index <= 0) {
					index = this.SongList.length - 1
				}
				uni.redirectTo({
					url: `/pages/song/song?index=${index}`
				})
			}
		},
		// 页面加载中
		onLoad(data) {
			const bgAudioManager = this.bgAudioManager = uni.getBackgroundAudioManager()
			this.index = data['index']
			let song_id = this.song_id = this.SongList[this.index].id
			this.GetSongInfo(song_id).then(value => {
				bgAudioManager.title = value.name // 标题
				bgAudioManager.singer = value.ar[0].name // 歌手名
				bgAudioManager.coverImgUrl = value.al.picUrl // 封面
			})
			this.GetMusicUrl(song_id).then(value => {
				bgAudioManager.src = value.url // 播放地址
				bgAudioManager.duration = value.time // 播放长度
				let start_time = uni.getStorageSync(`${song_id}`)
				if (start_time) {
					bgAudioManager.startTime = start_time // 开始播放时间
				}
				this.end_time = moment(value.time).format('mm:ss')
				this.isplay = true
				this.isrotate = 'running'

				uni.setNavigationBarTitle({
					title: this.SongInfo.name
				})
			})

			// 音乐播放事件
			bgAudioManager.onPlay(() => {
				this.isplay = true
				this.isrotate = 'running'
			})

			// 音乐进度变化
			bgAudioManager.onTimeUpdate(() => {
				this.currentTime = moment(bgAudioManager.currentTime * 1000).format('mm:ss')
				// 当前时长\总时长 = 当前进度条宽度\总进度条宽度
				this.activation_width = this.bgAudioManager.currentTime / this.bgAudioManager.duration * 530
			})

			// 音乐暂停事件
			bgAudioManager.onPause(() => {
				this.isplay = false
				this.isrotate = 'paused'
			})

			// 播放面板点击上一曲事件
			bgAudioManager.onPrev(() => {
				this.previous()
			})

			// 播放面板点击下一曲事件
			bgAudioManager.onNext(() => {
				this.next()
			})

			// 背景音频自然播放结束事件
			bgAudioManager.onEnded(() => {
				this.next()
				uni.removeStorage({
					key: `${this.SongInfo.id}`
				})
			})
		},

		// 页面销毁事件
		onUnload() {
			// 保存这首歌曲的播放记录
			if (this.bgAudioManager.currentTime !== 0) {
				uni.setStorage({
					key: `${this.SongInfo.id}`,
					data: this.bgAudioManager.currentTime
				})
			}
			this.bgAudioManager.stop()
		},

		computed: {
			...mapState('song', ['MusicUrl', 'SongList', 'SongInfo']),
		},
	}
</script>

<style lang="scss">
	page {
		padding: 0;
		height: 100%;
		width: 100%;
	}

	.song {
		height: 100%;
		background-color: #616a6f;
	}

	.song-top {
		padding-top: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 70%;

		text {
			color: #fff;
			margin: 10rpx 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 80%;
			text-align: center;
		}

		.author {
			margin-bottom: 30rpx;

			text {
				opacity: 0.6;
				margin-right: 10rpx;

				&:last-child {
					font-size: 22rpx;
					padding: 5rpx;
					border: 1rpx #fff solid;
				}
			}
		}

		.song-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			align-items: center;
			z-index: 2;

			view {
				background-color: #fff;
				border-radius: 50%;
				width: 65rpx;
				height: 65rpx;
				z-index: 1;
			}

			image {
				position: absolute;
				top: 30rpx;
				left: -10rpx;
				height: 430rpx;
				width: 200rpx;
				transform-origin: 30rpx 0;
				transition: all 1s;
			}

			.true_move {
				transform: rotate(-20deg);
			}

			.false_move {
				transform: rotate(-35deg);
			}
		}
	}

	.song-content {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 20%;
		left: 50%;
		transform: translate(-50%, 0);


		.rotateimg {
			animation-name: rotateimg;
			animation-duration: 5s;
			animation-iteration-count: infinite;
			animation-delay: 1s;
			animation-timing-function: linear;
		}

		@keyframes rotateimg {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}

		}

		image:nth-child(1) {
			position: absolute;
			height: 400rpx;
			width: 400rpx;
			border-radius: 50%;
		}

		image:nth-child(2) {
			height: 600rpx;
			width: 600rpx;
		}
	}

	.song-bottom {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;

		&>view {
			display: flex;
			justify-content: space-between;
			width: 100%;
			padding: 0 90rpx;
			height: 30%;
			margin-bottom: 50rpx;
		}

		image {
			height: 60rpx;
			width: 60rpx;
		}

		&>view:nth-child(2) {
			padding: 0 30rpx;
			align-items: center;
			width: 100%;

			text {
				color: #fff;
				font-size: 25rpx;
			}

			&>view {
				opacity: 0.6;
				height: 5rpx;
			}

			.undone {
				background-color: #fff;
				width: 530rpx;

				.activation {
					height: 100%;
					background-color: red;
					position: relative;
					display: flex;
					align-items: center;
					width: 0;

					.activation-box {
						position: absolute;
						right: -10rpx;
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background-color: red;
					}
				}
			}
		}
	}
</style>
